<template>
  <div>
    <div id="container-jigou-a" style="min-width: 1100px; height: 400px"></div>
    <div
      id="container-jigou-b"
      style="min-width: 1100px; height: 400px; margin-top: 20px"
    ></div>
  </div>
</template>
<script>
import Highcharts from "highcharts/highstock";
export default {
  created() {
    setTimeout(() => {
      var chartA = Highcharts.chart("container-jigou-a", {
        chart: {
          type: "line",
          backgroundColor: "#0000",
        },
        title: {
          text: "高速轴齿轮x",
          style: {
            color: "#2099D3",
          },
        },
        xAxis: {
          tickInterval: 5,
          title: {
            text: "Date",
            style: {
              color: "#2099D3",
            },
          },
          labels: {
            style: {
              color: "#2099D3",
            },
          },
          categories: [
            "0",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
          ],
        },
        yAxis: {
          title: {
            text: "Value",
            style: {
              color: "#2099D3",
            },
          },
          labels: {
            style: {
              color: "#2099D3",
            },
          },
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: false,
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: false,
          },
        },
        series: [
          {
            name: "<b style='color:#2099D3'>1</b>",
            data: [
              4, 0, 2, 4, 4, 3, 2, 4, 2, 4, 2, 3, 4, 3, 2, 3, 5, 2, 3, 4, 2, 2,
              3, 3, 0, 5, 5, 1, 1, 4,
            ],
          },
          {
            name: "<b style='color:#434348'>2</b>",
            data: [
              8, 6, 8, 9, 6, 10, 9, 7, 7, 10, 9, 6, 9, 9, 7, 9, 10, 9, 10, 8, 5,
              7, 9, 8, 7, 7, 10, 5, 10, 9,
            ],
          },
          {
            name: "<b style='color:#90ED7D'>3</b>",
            data: [
              12, 14, 12, 11, 12, 14, 11, 10, 14, 11, 12, 10, 12, 13, 13, 13,
              13, 12, 13, 11, 15, 12, 10, 12, 10, 12, 10, 14, 14, 14,
            ],
          },
        ],
      });
      var chartB = Highcharts.chart("container-jigou-b", {
        chart: {
          type: "line",
          backgroundColor: "#0000",
        },
        title: {
          text: "高速轴齿轮y",
          style: {
            color: "#2099D3",
          },
        },
        xAxis: {
          tickInterval: 2,
          title: {
            text: "时间(t/10min)",
            style: {
              color: "#2099D3",
            },
          },
          labels: {
            style: {
              color: "#2099D3",
            },
          },
          categories: [
            "900",
            "901",
            "902",
            "903",
            "904",
            "905",
            "906",
            "907",
            "908",
            "909",
            "910",
            "911",
            "912",
            "913",
            "914",
            "915",
            "916",
            "917",
            "918",
            "919",
            "920",
          ],
        },
        yAxis: {
          title: {
            text: "mvCSE",
            style: {
              color: "#2099D3",
            },
          },
          labels: {
            style: {
              color: "#2099D3",
            },
          },
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: false,
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: false,
          },
        },
        series: [
          {
            name: "<b style='color:#028DC7'>真实值</b>",
            data: [
              0.61, 0.63, 0.59, 0.6, 0.61, 0.61, 0.62, 0.64, 0.65, 0.66, 0.64,
              0.65, 0.67, 0.65, 0.66, 0.67, 0.63, 0.68, 0.67, 0.66,
            ],
          },
          {
            name: "<b style='color:#ED551A'>预测值</b>",
            data: [
              0.62, 0.64, 0.63, 0.61, 0.61, 0.65, 0.61, 0.64, 0.67, 0.63, 0.65,
              0.64, 0.65, 0.67, 0.64, 0.66, 0.64, 0.67, 0.65, 0.67,
            ],
          },
        ],
        colors: ["#028DC7", "#ED551A"],
      });
    }, 0);
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="less" scoped>
</style>
